<template>
  <div v-if="companyInfoIndustry.company_id">
    <div class="title">
      软件著作权：{{
        companyInfoIndustry.property_info ? companyInfoIndustry.property_info.count : "0"
      }}
    </div>
    <div class="table" v-if="!PdfType">
      <el-table :data="companyInfoIndustry.property_info ? companyInfoIndustry.property_info.list : []
        " border style="width: 100%" :header-cell-style="{ background: '#f0f7fc' }">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="regtime" label="登记日期">
          <template slot-scope="scope">
            {{ Number(scope.row.regtime) | time }}
          </template>
        </el-table-column>
        <el-table-column prop="fullname" label="软件全称"> </el-table-column>
        <el-table-column prop="regnum" label="登记号"> </el-table-column>
        <el-table-column prop="version" label="版本号"> </el-table-column>
        <el-table-column prop="publishtime" label="首次发表日期">
          <template slot-scope="scope">
            {{ Number(scope.row.publishtime) | time }}
          </template>
        </el-table-column>
      </el-table>

      <div class="more" @click="moreAdd(3)">查看全部</div>
    </div>
    <div v-else>
      <table border="1" v-if="companyInfoIndustry.property_info.list ? companyInfoIndustry.property_info.list.length : 0">
        <tr class="tableTr">
          <th class="tableTh" align="center">序号</th>
          <th class="tableTh" align="center">登记日期</th>
          <th class="tableTh" align="center">软件全称</th>
          <th class="tableTh" align="center">登记号</th>
          <th class="tableTh" align="center">版本号</th>
          <th class="tableTh" align="center">首次发表日期</th>
        </tr>
        <tr class="tableTr" v-for="(item, index) in companyInfoIndustry.property_info.list"
          :key="'companyInfoIndustry.property_info.list' + index">
          <td class="tableTd" align="center">{{ index + 1 }}</td>
          <td class="tableTd" align="center">
            {{ Number(item.regtime) | time }}
          </td>
          <td class="tableTd" align="center">{{ item.fullname }}</td>
          <td class="tableTd" align="center">{{ item.regnum }}</td>
          <td class="tableTd" align="center">{{ item.version }}</td>
          <td class="tableTd" align="center">
            {{ Number(item.publishtime) | time }}
          </td>
        </tr>
      </table>
      <div v-else class="legendText">暂无数据</div>

      <div v-if="companyInfoIndustry.property_info.list && companyInfoIndustry.property_info.list.length > 10 && PdfType" style="margin-top: 5px;">
        **以上表格仅展示部分数据，更多信息请登录优专平台查看（zf.youpat.cn）
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {};
  },
  watch: {
    companyInfoIndustry: {
      handler(newVal, oldVal) { },
      deep: true,
    },
  },
  filters: {
    time(date) {
      // if (val) {
      //   return new Date(val).toLocaleString()
      // }
      if (date) {
        date = new Date(date);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        m = m < 10 ? "0" + m : m;
        var d = date.getDate();
        d = d < 10 ? "0" + d : d;
      } else {
        return "";
      }
      return y + "-" + m + "-" + d;
    },
  },
  props: {
    PdfType: {
      type: Boolean,
      default: false,
    },
    companyInfoIndustry: {
      type: Object,
      default: () => { },
    },
  },
  components: {},
  mounted() { },
  methods: {
    moreAdd(type) {
      //   this.$router.push({
      //   path: "/morePatents",
      //   query: {
      //     patentType: type,
      //     company_id: this.companyInfoIndustry.company_id
      //   },
      // });

      let routerJump = this.$router.resolve({
        path: "/morePatents",
        query: {
          patentType: type,
          companyName: this.companyInfoIndustry.company,
          company_id: this.companyInfoIndustry.company_id,
        },
      });
      window.open(routerJump.href, "_blank");
    },
  },
};
</script>

<style scoped lang="less">
.more {
  text-align: center;
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
  cursor: pointer;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.table {
  padding: 20px 0px;
}

.institutionName {
  margin: 30px 0 20px 0;
  font-size: 14px;
}

.newinstitutionName {
  margin: 40px 0;
  font-size: 14px;

  div {
    margin-bottom: 10px;
    line-height: 20px;

    span {
      background-color: #ff5f59;
      border-radius: 2px;
      color: #fff;
      font-size: 11px;
      padding: 0px 3px;
      margin-left: 5px;
      box-sizing: border-box;
      display: inline-block;
    }
  }
}

.PatentType {
  display: flex;

  .item {
    background-color: #f2f3f5;
    border-radius: 10px;
    border: 1px solid #3677f5;
    padding: 20px 0;
    width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 10px;
    margin-right: 30px;
    cursor: pointer;

    .value {
      color: #3677f5;
      font-size: 16px;
      margin-bottom: 4px;
    }

    .number {
      font-size: 30px;
    }
  }

  .item2 {
    background-color: #3677f5;

    .value {
      color: #fff;
    }

    .number {
      color: #fff;
    }
  }
}

.echartsBox {
  width: 100%;
  height: 100%;
}

.echarts {
  padding: 20px 0px;
  display: flex;

  .left {
    width: 100px;

    .activation {
      color: #006cff;
    }

    div {
      margin-bottom: 10px;
      cursor: pointer;
    }
  }

  .right {
    flex: 1;
  }
}

@media (max-width: 1360px) {}

@media (max-width: 1280px) {}

@media (max-width: 768px) {}</style>
